<!doctype html>
<html>
<head>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta charset="UTF-8">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-sclae=1.0,user-scalable=0">
	<title>XuLuo</title>
	<style>
		*{margin: 0;padding: 0;font-family: 'microsoft yahei',Arial;}
		a{text-decoration: none;outline: none;}
		ul,li{list-style: none;}
        body{overflow:hidden;}
        #wrap{position:relative;left:0;right:0;top:0;}
        .page{overflow:hidden;position:relative;}
        .menu{position:fixed;top:50%;right:50px;}
        .menu>li{display:block;height:13px;width:13px;border:2px solid #155b76;margin-bottom:8px;border-radius:50%;cursor:pointer;}
        .menu>li.active{background: #155b76;}
        
        .plane img:nth-child(2){-webkit-animation:rot 0.2s infinite;animation:rot 0.2s infinite;}
        @-webkit-keyframes rot{
        	0%{-webkit-transform:rotate(0);}
        	50%{-webkit-transform:rotate(180deg);}
        	100%{-webkit-transform:rotate(360deg);}
        }
        @keyframes rot{
        	0%{transform:rotate(0);}
        	50%{transform:rotate(180deg);}
        	100%{transform:rotate(360deg);}
        }
        .page:nth-child(2) .cont{width:33.33%;height:100%;text-align:center;float:left;color:#fff;-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg);opacity:0;}
        .page:nth-child(2) .cont:nth-child(1){background:#05abbf;-webkit-transition:all .5s;}
        .page:nth-child(2) .cont:nth-child(2){background:#5e5ae2;-webkit-transition:all .5s .3s;}
        .page:nth-child(2) .cont:nth-child(3){background:#363b3d;-webkit-transition:all .5s .6s;}
        .active.page:nth-child(2) .cont{-webkit-transform:rotateY(0deg);transform:rotateY(0deg);opacity:1;}
        .page:nth-child(2) .cont p:nth-child(1),.page:nth-child(3) .cont p:nth-child(1){margin-top:100%;}

        .page:nth-child(3) .cont{width:33.33%;height:0%;text-align:center;float:left;color:#fff;}
        .page:nth-child(3) .cont:nth-child(1){background:#f8664e;-webkit-transition:all .5s;}
        .page:nth-child(3) .cont:nth-child(2){background:#f2ab13;-webkit-transition:all .5s .3s;}
        .page:nth-child(3) .cont:nth-child(3){background:#8eb131;-webkit-transition:all .5s .6s;}
        .active.page:nth-child(3) .cont{height:100%;}

        .box{-webkit-transform:rotateY(-40deg) rotateX(-4deg) rotateZ(4deg);transform:rotateY(-40deg) rotateX(-4deg) rotateZ(4deg);-webkit-transform-style:preserve-3d;transform-style:preserve-3d;width:120px;height:120px;position:absolute;top:50%;}
        .box div{position:absolute;width:120px;height:110px;background:#0390A1;border:1px solid #3f515f;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;box-sizing:border-box;}
        .box .left{right:100%;-webkit-transform:rotateY(-90deg);transform:rotateY(-90deg);-webkit-transform-origin:right;transform-origin:right;}
        .box .top{top:-120px;left:0;background:transparent;-webkit-transform:rotateX(90deg);transform:rotateX(90deg);-webkit-transform-origin:bottom;transform-origin:bottom;height:120px;border:none;}
        .box .top .lf,.box .top .rt{display:inline-block;box-sizing:border-box;background:#0390A1;width:57px;height:120px;-webkit-transition:all .25s;transition:all .25s;}
        .active .box .top .lf{-webkit-transform:rotateY(-120deg);transform:rotateY(-120deg);-webkit-transform-origin:left;transform-origin:left;}
        .active .box .top .rt{-webkit-transform:rotateY(126deg);transform:rotateY(126deg);-webkit-transform-origin:right;transform-origin:right;}
        .box .front{left:0;}
        .box .right{left:100%;-webkit-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transform-origin:left top;transform-origin:left top;}
        .box .back{left:0;-webkit-transform:translateZ(-120px);transform:translateZ(-120px);}
	</style>
</head>
<body>
	<div id="wrap">
	     <div class="page" style="background:#FFD200;">
	         <div class="plane" style="position:relative;top:20%;width:799px;left:50%;margin-left:-400px;">
	         	<img src="../../images/plane.svg">
	         	<img src="../../images/plane2.svg" style="position:absolute;left:105px;top:208px;">
	         </div>
	         <pre id="text" style="position:absolute;bottom:5%;left:5%;"></pre>
	     </div>
	     <div class="page" style="background:orange">
	         <div class="cont">
	         	<p>内测托管</p>
	         	<p>一键上传应用，扫描二维码下载</p>
	         </div>
	         <div class="cont">
	         	<p>内测托管</p>
	         	<p>一键上传应用，扫描二维码下载</p>
	         </div>
	         <div class="cont">
	         	<p>内测托管</p>
	         	<p>一键上传应用，扫描二维码下载</p>
	         </div>
	     </div>
	    <div class="page" style="background:hotpink">
	         <div class="cont">
	         	<p>内测托管</p>
	         	<p>一键上传应用，扫描二维码下载</p>
	         </div>
	         <div class="cont">
	         	<p>内测托管</p>
	         	<p>一键上传应用，扫描二维码下载</p>
	         </div>
	         <div class="cont">
	         	<p>内测托管</p>
	         	<p>一键上传应用，扫描二维码下载</p>
	         </div>
	     </div>
	     <div class="page" style="background:#414859;">
	        <div class="box" style="right:50%;margin-right:100px;">
	        	<div class="left"></div>
	        	<div class="top">
	        		<span class="lf"></span>
	        		<span class="rt"></span>
	        	</div>
	        	<div class="front"></div>
	        	<div class="right"></div>
	        	<div class="back"></div>
	        </div>
	        <div class="box" style="left:50%;margin-left:100px;">
	        	<div class="left"></div>
	        	<div class="top">
	        		<span class="lf"></span>
	        		<span class="rt"></span>
	        	</div>
	        	<div class="front"></div>
	        	<div class="right"></div>
	        	<div class="back"></div>
	        </div>	    
	    </div>
	</div>
	<ul class="menu"></ul>
	<!-- 必须引入的js -->
	<script type="text/javascript" src="js/main.js"></script>
	<script type="text/javascript">
		window.onload=function(){			
            fullPage({
                ele:'wrap',     //元素id
                page:'page',    //切换页class
                tit:'menu',     //索引class
                move:function(i){
                	if(i=='0'){               								
						typer();
                	}
                }
            });
            function typer(){            	
				var s = 'Welcome!\n';
					s += '{\n';
					s += '     '+'动画来了!\n';
					s += '}\n';
					con = document.getElementById('text');
					index = 0;
					length = s.length;
					time = null;
				con.innerHTML='';
				time=setInterval(function(){
				    con.insertAdjacentHTML('beforeEnd',s.charAt(index));
				    if(index++ === length){
				    	clearInterval(time);				    	
				    }
				},80);

	        }
	        typer();
        };
	</script>
</body>
</html>